{include file="public/head"/}
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang('company_profile_attribue_lista')}</div>
        <div class="row clearfix" style="padding-top:12px">
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" id="list-all" @click="langchange('zh')">{:lang('Chinese')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" id="list-normal" @click="langchange('en')">{:lang('English')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" id="list-pulloff" @click="langchange('pt')">{:lang('Portuguese')}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 column text-right">
                <div>
                    <a href="/admin/customer/coattradd" class='btn btn-primary' data-toggle="modal"
                       data-target="#coatt_editModal" stytle="margin-right:20px" onfocus="this.blur()">
                        <span class="glyphicon glyphicon-plus"></span> {:lang('add_new_company_attribute')}
                    </a>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <!--<th style="text-align:center"><input type="checkbox"  /> </th>-->
                        <th style="padding-left: 20px;"> {:lang('attribute_name')}</th>
                        <th>{:lang('country')}</th>
                        <th> {:lang('applicable_company_type')}</th>
                        <th> {:lang('aplicable_individuals')}</th>
                        <th> {:lang('attribute_type')}</th>
                        <th class="sorting" @click="sortfun(1)" data-order="1"> {:lang('edit')}</th>
                        <th> {:lang('operate')}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                        <!--<td align="center"><input type="checkbox"  /></td>-->
                        <td align="left" style="padding-left: 20px;"> {{item.content}}</td>
                        <td align="left"> {{item.country}}</td>
                        <td align="left">{{item.cotypename}}</td>
                        <td align="left">{{item.personman}}</td>
                        <td align="left"> {{item.textselect}}</td>
                        <td> {{item.mangname}} <br/>
                            <small>{{item.update_date}}</small>
                        </td>
                        <td class="text-right">
                            <div>
                                <a :href="'/admin/customer/coattredit?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal"
                                   data-target="#coatt_editModal" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-pencil"></span>
                                    {:lang('edit')}
                                </a>
                                <a v-if="item.del_at==0" href="#" class='btn btn-sm btn-default option-del'
                                   @click.prevent="delcoattr(item.id,1)"><span
                                        class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>
                                <a v-else="item.del_at>=0" href="#" class='btn btn-sm btn-danger option-clear'
                                   @click.prevent="delcoattr(item.id,2)"><span
                                        class="glyphicon glyphicon-fire"></span>{:lang('clear')}</a>
                            </div>
                        </td>

                    </tr>
                    <tr style="text-align: center;" v-if="list.length==0">
                        <td colspan="7">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination" id="pagination">
                </ul>
            </div>
        </div>
    </div>
</div>


<!-- InstanceEndEditable --></div>
<!--添加弹窗部分 开始-->
<div class="modal fade" id="coatt_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--弹窗部分 结束-->
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '.ntDesktop',
        data: {
            list: [],
            page: 1,
            lang: 'zh',
            batch: [],
            order: 1,
            pauname: '',//排序字段
            pageSize: 2,
        },
        methods: {
            setPage(pageCurrent, pageSum) {
            //数据总条数
            var myPageCount = pageSum;
            //一页显示多少条
            var myPageSize = this.pageSize;
            //总页数
            var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
            $.jqPaginator('#pagination', {
                totalPages: parseInt(countindex),
                //最多显示多少页
                visiblePages: 5,
                //默认显示第几页
                currentPage: pageCurrent,
                first: '<li class="first"><a href="javascript:;">'+langcon.page_home+'</a></li>',
                prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>'+langcon.previous_page+'</a></li>',
                next: '<li class="next"><a href="javascript:;">'+langcon.next_page+'<i class="arrow arrow3"></i></a></li>',
                last: '<li class="last"><a href="javascript:;">'+langcon.last_page+'</a></li>',
                page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                all:'<li class="page"><a href="javascript:;">'+parseInt(countindex)+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                onPageChange:(num, type)=>{
                    if (type == "change") {
                        this.page=num
                        this.getAllList()
                    }
                }
            });
        },
            //数据所有获取
            getAllList(){
                $.ajax({
                    url: "/admin/customer/customercoattr",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        lang: this.lang//语言
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getcoattr;
                        // 将数据渲染到页面
                            if(result.size / this.pageSize>1){
                                $('#pagination').show()
                                this.setPage(parseInt(this.page),result.size)
                            }else{
                                $('#pagination').hide()
                            }
                    }
                })
            },
            langchange(lang){
                this.lang = lang;
                this.getAllList(1)
            },
            sortoneData(a, b) {
                if (this.order == 1) {
                    $(event.target).attr('data-order', 2)
                    return b.update_at - a.update_at
                } else {
                    $(event.target).attr('data-order', 1)
                    return a.update_at - b.update_at
                }
            },
            sortfun(type, $event){
                this.order = $(event.target).attr('data-order')
                if (type == 1) {
                    this.pauname = 'update_at'
                    this.list.sort(this.sortoneData);
                }
            },
            //删除属性
            delcoattr(id, code){
                if (code == 1) {
                    url = '/admin/customer/coattrdelete?id='
                } else {
                    url = '/admin/customer/coattrclear?id='
                }
                $.ajax({
                    url: url + id,
                    type: 'post',
                    dataType: 'json',
                    success: (res) => {
                        change_mes_type('.alert',res.status)
                        if (res.status != 1) {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                            return false;
                        } else {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                            if(code==2 && !(this.list.length - 1))
                            {
                                if(this.page>1){
                                    this.page--
                                }
                            }
                            this.getAllList()
                        }
                    }
                });
            },
            allsel(event){
                if ($(event.target).prop('checked')) {
                    $(event.target).parents('table').find('input').prop('checked', true)
                    this.batch = this.allid
                } else {
                    $(event.target).parents('table').find('input').prop('checked', false)
                    this.batch = []
                }
            },
            onesel(did){
                if (this.batch.indexOf(did) == -1) {
                    this.batch.push(did)
                } else {
                    this.batch.splice(this.batch.indexOf(did), 1)
                }
                var isall = true
                $('td input').each(function () {
                    if (!$(this).prop('checked')) {
                        isall = false
                    }
                })
                $('th input').prop('checked', isall)
            }
        },
        created(){
            this.getAllList()
            $('#coatt_editModal').on('hide.bs.modal', () => {
                this.getAllList()
            })
        }
    })
    //替换之前的模板
    $("#coatt_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
</script>
